import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
import CustomPopover from './CustomPopover';
import './custom-popover.scss';
import { copyTextToClipboard, toastShort } from '../../utils';
import { UserAddOutlined, MinusOutlined } from '@ant-design/icons';

interface Props {
    clientX: number
    clientY: number
}

const AvatarPopover = (props: Props, ref: any) => {
    useImperativeHandle(ref, () => ({
        openPopover
    }))

    const {
        clientX,
        clientY
    } = props;

    const customSelectRef = useRef<any>(null);

    const openPopover = () => {
        customSelectRef.current.show();
    };

    // const onClickInsertToolsItem = (type: string) => {
    //     toastShort('warning', '表格界面不支持此操作');
    //     customSelectRef.current.handleClosePopover();
    // }

    return (
        <CustomPopover
            ref={customSelectRef}
            clientX={clientX}
            clientY={clientY}
            contentRender={(props) => (
                <div className='avatar-box'>
                    <div className='avatar-item-box'>
                        <div className='avatar-item-img'>
                            <img className='avatar-item-img-box' src={require('./../../assets/image/0.png')} />
                        </div>
                        <div className='avatar-item-name'>刘长峰</div>
                        <div className='avatar-item-type'>创建者</div>
                    </div>
                    <div className='avatar-item-box'>
                        <div className='avatar-item-img'>
                            <img className='avatar-item-img-box' src={'http://shpfile-data-1314977817.cos.ap-guangzhou.myqcloud.com/public/2023032051978eacda-828c-4121-838e-2c0c1439ba6a30.png'} />
                        </div>
                        <div className='avatar-item-name'>胡理乐</div>
                        <div className='avatar-item-type'>查阅者</div>
                    </div>
                    <div className='avatar-item-box'>
                        {/* 角标 */}
                        <div className='avatar-item-badge'>
                            <div className='avatar-item-badge-delete'></div>
                        </div>
                        <div className='avatar-item-img'>
                            <img className='avatar-item-img-box' src={'http://shpfile-data-1314977817.cos.ap-guangzhou.myqcloud.com/public/2023032001e1b9ea7a-b36b-4b05-9bd6-95e120e4645684.png'} />
                        </div>
                        <div className='avatar-item-name'>风声</div>
                        <div className='avatar-item-type'>查阅者</div>
                    </div>
                    <div className='avatar-item-box'>
                        <div className='avatar-item-img'>
                            <img className='avatar-item-img-box' src={'http://shpfile-data-1314977817.cos.ap-guangzhou.myqcloud.com/public/2023032024b320e24f-d335-47f9-a076-b73b0cb6622d38.png'} />
                        </div>
                        <div className='avatar-item-name'>郜飞飞</div>
                        <div className='avatar-item-type'>查阅者</div>
                    </div>
                    <div className='avatar-item-box'>
                        <div className='avatar-item-img'>
                            <img className='avatar-item-img-box' src={'http://shpfile-data-1314977817.cos.ap-guangzhou.myqcloud.com/public/2023032051bc32786d-227e-46e3-a8b0-e328c65d33e429.png'} />
                        </div>
                        <div className='avatar-item-name'>赵婧文</div>
                        <div className='avatar-item-type'>校对者</div>
                    </div>
                    <div className='avatar-item-box'>
                        <div className='avatar-item-img'>
                            <img className='avatar-item-img-box' src={'http://shpfile-data-1314977817.cos.ap-guangzhou.myqcloud.com/public/202303204356bf3a1e-002b-411c-bb52-a035a4b1bd4132.png'} />
                        </div>
                        <div className='avatar-item-name'>Binary</div>
                        <div className='avatar-item-type'>查阅者</div>
                    </div>
                    <div className='avatar-item-box'>
                        <div className='avatar-item-img-add'>
                            <UserAddOutlined style={{ fontSize: 20, color: '#fff' }} />
                        </div>
                        <div className='avatar-item-add'>添加成员</div>
                    </div>
                </div>
            )}
        />
    )
}


export default forwardRef(AvatarPopover);